Visualizing `...obj` for object properties.
The spread syntax is a convenient way to create a shallow copy of an object or to merge multiple objects into a new one. It works by "spreading" the properties of the source object into the new object literal.
// Shallow Copy
const original = { a: 1, b: 2 };
const copy = { ...original }; // { a: 1, b: 2 }
// Merging Objects
const defaults = { color: 'red', size: 'medium' };
const userSettings = { size: 'large', weight: 'light' };
const finalSettings = { ...defaults, ...userSettings };
// finalSettings is { color: 'red', size: 'large', weight: 'light' }
Original Object:
Copied Object (with spread syntax):
Are they the same object? `original === copied`
Base Object:
Updates:
Merged Object (`...base, ...updates`):